<template>
  <div class="homepage">
    <my-head title="小荷在线" :go="null" :ri="true"></my-head>
    <div class="content">
      <!-- 轮播部分 -->
    <div class="carousel">
      <!-- <my-swiper></my-swiper> -->
    </div>
    <!-- 小荷在线的新闻 -->
    <div class="journalism">
   
      <ul id="lotus" ref="lotus" :class="{anim:animate==true}">
        <li v-for="(item,index) in journalismes" :key="index" >
           <svg class="icon" aria-hidden="true">
          <use :xlink:href="item.svg"></use>
        </svg>
          <!-- <router-link to="/Notice" @click="jouer(item.id)">{{item.text}}</router-link> -->
          <span  @click="jouer(item.id)">{{item.text}}</span>
        </li>
      </ul>

 </div>
 <!-- 四个小按钮 -->
 <div class="four_tab">
 <ul>
  <router-link to="/understand" tag="li">
    <p class="first"><span class="whitees"></span></p>
    <p>了解小荷</p>
  </router-link>
  <router-link to="/novice" tag="li">
    <p class="second"><span class="whitees"></span></p>
    <p>新手指引</p>
  </router-link>
  <router-link to="Novice" tag="li">
    <p class="third"><span class="whitees"></span></p>
    <p>邀请有礼</p>
  </router-link>
  <router-link to="" tag="li">
    <p class="fourth"><span class="whitees"></span></p>
    <p>平台数据</p>
  </router-link>
 </ul>
 </div>
 <!-- 下面的一些金融的数据 -->
 <div class="details">
 <div class="datadetails">
 <div class="datas">
 <ol>
   <li class="ones">
     <ul>
      <li><img src="../../../static/img/recommends.gif"></li>
      <li>更多</li>
      <li>></li>
     </ul>
   </li>
   <li>荷包理财20180120二期</li>
   <li>
  <router-link to="">
    <ul>
      <li><p><span>7.20</span> <span>%</span></p><p>年化利率</p></li>
      <li>
        <p >
          <svg class="icon" aria-hidden="true">
          <use xlink:href="#xe63a"></use>
        </svg>
        <span style="color:#2c2c2c;margin-left:-27%;">15天</span></p>
        <p>
           <svg class="icon" aria-hidden="true">
          <use xlink:href="#xe6b5"></use>
        </svg>
          1000.00元/份</p>
      </li>
    </ul>
  </router-link>
   </li>
<li class="twos">荷包理财20180120二期</li>
   <li>
  <router-link to="">
    <ul>
      <li><p><span>7.20</span> <span>%</span></p><p>年化利率</p></li>
      <li>
        <p >
          <svg class="icon" aria-hidden="true">
          <use xlink:href="#xe63a"></use>
        </svg>
        <span style="color:#2c2c2c;margin-left:-27%;">15天</span></p>
        <p>
           <svg class="icon" aria-hidden="true">
          <use xlink:href="#xe6b5"></use>
        </svg>
          1000.00元/份</p>
      </li>
    </ul>
  </router-link>
   </li>
</ol>
 </div>
</div>
 </div>

 <!-- 下面的一些金融的数据 -->
 <div class="details">
 <div class="datadetails">
 <div class="datas">
 <ol>
   <li class="ones">
     <ul>
      <li><img src="../../../static/img/welfare.gif"></li>
      <li>更多</li>
      <li>></li>
     </ul>
   </li>
   <li>荷包理财20180120二期</li>
   <li>
  <router-link to="">
    <ul>
      <li><p><span>7.20</span> <span>%</span></p><p>年化利率</p></li>
      <li>
        <p >
          <svg class="icon" aria-hidden="true">
          <use xlink:href="#xe63a"></use>
        </svg>
        <span style="color:#2c2c2c;margin-left:-27%;">15天</span></p>
        <p>
           <svg class="icon" aria-hidden="true">
          <use xlink:href="#xe6b5"></use>
        </svg>
          1000.00元/份</p>
      </li>
    </ul>
  </router-link>
   </li>
<li class="twos">荷包理财20180120二期</li>
   <li>
  <router-link to="">
    <ul>
      <li><p><span>7.20</span> <span>%</span></p><p>年化利率</p></li>
      <li>
        <p >
          <svg class="icon" aria-hidden="true">
          <use xlink:href="#xe63a"></use>
        </svg>
        <span style="color:#2c2c2c;margin-left:-27%;">15天</span></p>
        <p>
           <svg class="icon" aria-hidden="true">
          <use xlink:href="#xe6b5"></use>
        </svg>
          1000.00元/份</p>
      </li>
    </ul>
  </router-link>
   </li>
</ol>
 </div>
</div>
 </div>
<!-- 合法 -->
<div class="security">
<ul>
  <li @click="security">安全保障</li>
  <li @click="supervisey">监管法规</li>
  <li @click="cooperation">合作伙伴</li>
</ul>
</div>
    </div>
  </div>
</template>


<script>
import Head from '@/components/Head'

export default {
  name: "HelloWorld",
  data() {
    return {
      lists: [{ id: 1, svg: "#icon-iconlingdang" }],
      animate:false,
      journalismes:[
        {id:1,text:"【小荷在线】让钱动起来，让财富滚雪球"},
        {id:2,text:"互金行业2018年趋势预测"},
        {id:3,text:"银行存管对于投资人具体有什么好处"}
      ]
    };
  },
  created(){
  // setInterval(this.scroll,2000)
  },
  methods:{
   scroll(){
    let lotus = this.$refs.lotus;
    lotus.style.marginTop='-0.4rem';
    this.animate=!this.animate;
    var that = this; 
    setTimeout(function(){
        that.journalismes.push(that.journalismes[0]);
        that.journalismes.shift();
        lotus.style.marginTop='0';
        that.animate=!that.animate;
    },1000)
    },
    jouer(id){
      var id=this.$route.params.id;
      this.$router.push({path:"/Notice"})
      // console.log(id)
      // this.$router.push({path:"/Notice"})
    },
    // 安全保障
    security(){
    this.$router.push({path:"/securltys"})
    },
    // 监管法规
    supervisey(){
    this.$router.push({path:"/superviseys"})
    },
    // 合作伙伴
    cooperation(){
    this.$router.push({path:"/cooperations"})
    }
  },
  components: {
    myHead:Head
  }
};
</script>

<style scoped>
.homepage {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.content{
  flex: 1;
  overflow-y: auto;
}
/* 轮播部分 */
.carousel{
  width: 100%;
  height: 1.4rem;
  background:red;
}

/* 小荷在线新闻 */
.journalism {
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  border-bottom: 1px solid #eaeaea;
  overflow: hidden;
  transition: all 1s;
}
.journalism ul li sapn {
  font-size: 14px;
  margin-left: 10px;
  color: black;
}
.journalism ul li{
  height: 0.4rem;
  line-height: 0.4rem;
}
.journalism .icon {
  margin-left: 30px;
  fill: red;
}
.journalism .anim{
  transition: all 1s;
}
/* 四个小按钮 */
.four_tab ul {
  display: flex;
}
.four_tab ul li {
  flex: 1;
  text-align: center;
  margin-top: 0.2rem;
  font-size: 14px;
  margin-bottom: 2%;
}
.four_tab .first {
  width: 0.63rem;
  height: 0.63rem;
  background: #ffaeb0;
  border-radius: 50%;
  margin-bottom: 17px;
  margin-left: 18%;
}
.four_tab .second {
  width: 0.63rem;
  height: 0.63rem;
  background: #1aaaff;
  border-radius: 50%;
  margin-bottom: 17px;
  margin-left: 18%;
}
.four_tab .third {
  width:0.63rem;
  height: 0.63rem;
  background: #b857ff;
  border-radius: 50%;
  margin-bottom: 0.17rem;
  margin-left: 18%;
}
.four_tab .fourth {
  width: 0.63rem;
  height: 0.63rem;
  background: #16e9c9;
  border-radius: 50%;
  margin-bottom: 17px;
  margin-left: 18%;
}
.four_tab .whitees {
  background: white;
  border-radius: 6px;
  padding: 17px;
  display: inline-block;
  margin-top: 22%;
  margin-left: 3%;
}
/* 一些金融的数据 */
.details {
  width: 100%;
  background: #f4f4f4;
}
.details .datadetails {
  padding-top: 0.22rem;
}
.details .datadetails .datas {
  width: 100%;
  background: white;
}
.details .datadetails .datas .ones {
  border-bottom: 1px solid #9f9f9f;
}
.details .datadetails .datas ol li > ul {
  display: flex;
}
.details .datadetails .datas ol li > ul li:nth-child(1) {
  flex: 1;
  margin-bottom: 2%;
}
.details .datadetails .datas ol li > ul li img {
  width: 1rem;
  
}
.details .datadetails .datas ol li > ul li:nth-child(1){
  padding-top: 0.1rem;
  margin-left: 0.1rem;
}
.details .datadetails .datas ol li > ul li:nth-child(2) {
  color: #9f9f9f;
  font-size: 17px;
  margin-top: 0.2rem;
  margin-right: 6%;
}
.details .datadetails .datas ol li > ul li:nth-child(3) {
  color: #9f9f9f;
  font-size: 23px;
  margin-top: 0.15rem;
  margin-right: 5%;
}
.details .datadetails .datas .twos {
  margin-top: 3%;
  margin-left: 3%;
  font-size: 15px;
}
.details .datadetails .datas ol li:nth-child(2) {
  margin-top: 3%;
  margin-left: 3%;
  font-size: 15px;
}
.details .datadetails .datas a ul {
  display: flex;
  margin-top: 4%;
  border-bottom: 1px solid #9f9f9f;
}
.details .datadetails .datas a ul li {
  flex: 1;
  text-align: center;
  margin-bottom: 3%;
}
.details .datadetails .datas a ul li:nth-child(1) {
  margin-top: 2%;
  border-right: 1px solid #9f9f9f;
}
.details .datadetails .datas a ul li p:nth-child(1) {
  margin-bottom: 7%;
}
.details .datadetails .datas a ul li p span:nth-child(1) {
  color: #e03637;
  font-size: 24px;
}
.details .datadetails .datas a ul li p span:nth-child(2) {
  color: #e03637;
  font-family: 17px;
}
.details .datadetails .datas a ul li p:nth-child(2) {
  color: #8c8c8c;
  font-size: 15px;
  margin-top: 0.3rem;
  margin-bottom: 0.2rem;
}

/* 合法 */
.security {
  width: 100%;
  margin-top: 10px;
}
.security ul {
  display: flex;
}
.security ul li {
  flex: 1;
  text-align: center;
  margin-bottom: 2%;
}
</style>


<!--<template>
 
<div id="box">
  <ul id="con1" ref="con1" :class="{anim:animate==true}">
    <li v-for='item in items'>{{item.name}}</li>
  </ul>
</div>
</template>
<script>
 
 export default {
data() {
 return {
   animate:false,
   items:[ 
     {name:"马云"},
     {name:"雷军"},
     {name:"王勤"}
   ]
 }
},
created(){
  setInterval(this.scroll,1000) 
},
methods: {
  scroll(){
    let con1 = this.$refs.con1;
    con1.style.marginTop='-30px';
    this.animate=!this.animate;
    var that = this; 
    setTimeout(function(){
        that.items.push(that.items[0]);
        that.items.shift();
        con1.style.marginTop='0px';
        that.animate=!that.animate;
    },500)
  }
}
}
</script>
 
<style>

#box{
  width: 300px;
  height: 32px;
  line-height: 30px;
  overflow: hidden;
  padding-left: 30px;
  border: 1px solid black;
  transition: all 0.5s;
}
.anim{
  transition: all 0.5s;
}

</style>-->